<template>
    <div>
        <h2>报修统计</h2>
        <div id="four"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts';
import http from '../api/link.js'

type EChartsOption = echarts.EChartsOption;


var option: EChartsOption;




onMounted(() => {
    var chartDom = document.getElementById('four')!;
    var myChart = echarts.init(chartDom);

    http('/chartDataFour').then(res => {
        let xdata = res.data.day
        let ydata = res.data.num
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: xdata
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '一般用户',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: ydata['一般用户']
                },
                {
                    name: '月租用户',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: ydata['月租用户']
                },
                {
                    name: '特殊车辆',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: ydata['特殊车辆']
                },
            ]
        };




        option && myChart.setOption(option);

    })
})




</script>

<style scoped>
h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;

}

#four {
    height: 4.0667rem;
}
</style>